<template>
  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// const delta = -24
export default {
  name: 'scrollBar',
  data () {
    return {
      top: 60,
      baseTop: 0 // 定义初始化得值判断用
    }
  },
  props: {
    topFlag: Boolean,
    // 判断是否设置自定义导航
    isTopShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleScroll (e) {
      e.preventDefault()
      const $container = this.$refs.scrollContainer
      const $containerHeight = $container.offsetHeight
      const $wrapper = this.$refs.scrollWrapper
      const $wrapperHeight = $wrapper.offsetHeight
      if (e.wheelDelta > 0) {
        // this.top = Math.min((this.topFlag || this.$store.state.oemObj.oemFlag ? 0 : 48), this.top + e.wheelDelta)
        this.top = Math.min(this.baseTop, this.top + e.wheelDelta)
      } else {
        if ($containerHeight < $wrapperHeight) {
          if (this.top < -($wrapperHeight - $containerHeight)) {
            this.top = this.top
          } else {
            this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight)
          }
        } else {
          // this.top = (this.topFlag || this.$store.state.oemObj.oemFlag ? 0 : 48)
          this.top = this.baseTop
        }
      }
    }
  },
  watch: {
    // 监听传进得值初始化top值
    isTopShow: {
      handler: function () {
        if (!this.isTopShow) {
          this.top = 60
        } else {
          this.top = (this.topFlag || this.$store.state.oemObj.oemFlag) ? 0 : 60
        }
        this.baseTop = this.top
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
.scroll-container
  /*position relative*/
  width 100%
  height 100%
  .scroll-wrapper
    position absolute
    width 100%
    z-index 3
.new-config
  .scroll-container
    .scroll-wrapper
      z-index 1
</style>
